<template>
  <!-- 订单详情页 -->
  <div>
    <el-button type="primary" class="btn" @click="back">返回</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="订单项编号" />
      <el-table-column prop="productId" label="产品编号" />
      <el-table-column prop="product.name" label="产品" />
      <el-table-column prop="product.photo" label="产品图片">
        <template slot-scope="scope">
          <el-image
            style="width: 40px; height: 40px"
            :src="scope.row.product.photo"
            :preview-src-list="[scope.row.product.photo]"
          />
        </template>
      </el-table-column>
      <el-table-column prop="price" label="单价">
        <template slot-scope="scope"
          >￥ <span style="color: red"> {{ scope.row.price }}</span> 元
        </template>
      </el-table-column>
      <el-table-column prop="number" label="数量" width="200" />
    </el-table>
    <div class="mkz">
      <el-row :gutter="20">
        <el-col :span="6" v-model="tuData"
          ><div class="grid-content bg-purple">
            <span style="color: green"> 订单基本信息 </span>
            <div class="container">
              <div>
                <label class="left">订单编号:</label>
                <span class="right">{{ tuData.id }}</span>
              </div>
              <div>
                <label class="left">定单金额:</label>
                <span class="right"
                  >￥<span style="color: red"> {{ tuData.total }}</span>
                  元</span
                >
              </div>
              <div>
                <label class="left">下单时间:</label>
                <!-- 如果没有输入显示为暂无-->
                <span class="right">{{ tuData.orderTime | filteTime }}</span>
              </div>
              <div>
                <label class="left">订单状态:</label>
                <span class="right">{{ tuData.status }}</span>
              </div>
            </div>
          </div></el-col
        >
        <el-col :span="6" v-if="tuData.employee != null" v-model="tuData"
          ><div class="grid-content bg-purple">
            <span style="color: green"> 接单者信息 </span>
            <div class="container">
              <div>
                <label class="left">接单者:</label>
                <span class="right">{{ tuData.employee.username }}</span>
              </div>
              <div>
                <label class="left">接单者手机号:</label>
                <span class="right">{{ tuData.employee.telephone }}</span>
              </div>
            </div>
          </div></el-col
        >
        <el-col :span="6" v-if="tuData.customer" v-model="tuData"
          ><div class="grid-content bg-purple">
            <span style="color: green"> 下单者信息 </span>
            <div class="container">
              <div>
                <label class="left">下单者:</label>
                <span class="right">{{ tuData.customer.realname }}</span>
              </div>
              <div>
                <label class="left">下单者手机号:</label>
                <span class="right">{{ tuData.customer.telephone }}</span>
              </div>
            </div>
          </div></el-col
        >
        <el-col :span="6" v-if="tuData.address" v-model="tuData"
          ><div class="grid-content bg-purple">
            <span style="color: green"> 雇主信息 </span>
            <div class="container">
              <div>
                <label class="left">雇主:</label>
                <span class="right">{{ tuData.address.username }}</span>
              </div>
              <div>
                <label class="left">雇主手机号:</label>
                <span class="right">{{ tuData.address.telephone }}</span>
              </div>
              <div>
                <label class="left">服务地址:</label>
                <span class="right">
                  {{ tuData.address.city }}
                  {{ tuData.address.area }}
                  {{ tuData.address.address }}
                </span>
              </div>
            </div>
          </div></el-col
        >
      </el-row>
    </div>
  </div>
</template>

<script>
import Moment from "moment";
import { findById } from "@/api/order";
export default {
  filters: {
    filteTime(v) {
      return Moment(v).format("YYYY-MM-DD hh:mm:ss");
    },
  },
  data() {
    return {
      id: this.$route.query.index,
      tableData: [],
      tuData: {},
    };
  },
  computed: {},
  created() {
    this.pageQuery();
  },
  mounted() {},
  methods: {
    back() {
      this.$router.push({
        path: "/admin/order/List",
      });
    },
    async pageQuery() {
      const res = await findById({ id: this.id });
      this.tuData = res.data;
      this.tableData = res.data.orderLines;
    },
  },
};
</script>
<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #f5f6f8;
}
.bg-purple {
  background: #f1f3f5;
  padding: 20px;
  border: 1px solid rgb(243, 8, 8);
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 200px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.btn {
  margin-right: 10px;
}
.container {
  margin-top: 30px;
  height: 440 px;
  border-bottom: 1px solid #ddd;
  div {
    margin-bottom: 32px;
    font-size: 14px;
  }
}
.mkz {
  margin-top: 20px;
}
</style>
